<template>
  <header>
    <nav class="navbar navbar-expand-lg center-box">
      <div class="container-fluid">
        <button class="meau-but navbar-toggler" type="button" data-bs-toggle="collapse"
          data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false"
          aria-label="Toggle navigation">
          <img src="../assets/icons/meau.svg" />
        </button>
        <div class="navbar-brand">
          <img class="top-icon" src="../assets/icons/favsion.png" />
        </div>

        <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0 ul-li">
            <li class="nav-item">
              <router-link to="/home">{{ $t('topBar.home') }}</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/community">{{ $t('topBar.community') }}</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/study">{{ $t('topBar.learning') }}</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/about">{{ $t('topBar.about') }}</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/contentlog">{{ $t('topBar.journal') }}</router-link>
            </li>

            <li class="nav-item">
              <div class=" navbar-collapse" id="navbarNavDarkDropdown">
                <ul class="navbar-nav">
                  <li class="nav-item dropdown">
                    <button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown"
                      style="background-color: rgb(36, 36, 36); border-radius: none; border: none;" aria-expanded="false">
                      <img src="../assets/icons/traslation.svg" />
                    </button>
                    <ul class="dropdown-menu dropdown-menu-dark">
                      <li>
                        <div class="dropdown-item" @click="seleLanguage('en')">English</div>
                      </li>
                      <li>
                        <div class="dropdown-item" @click="seleLanguage('zh')">中文</div>
                      </li>
                      <li>
                        <div class="dropdown-item" @click="seleLanguage('Japanese')">日本語</div>
                      </li>
                      <li>
                        <div class="dropdown-item" @click="seleLanguage('Russian')">Русский язык</div>
                      </li>
                      <li>
                        <div class="dropdown-item" @click="seleLanguage('french')">Français</div>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </li>

            <li class="nav-item">
              <div class=" navbar-collapse" id="navbarNavDarkDropdown">
                <ul class="navbar-nav">
                  <li class="nav-item dropdown">
                    <button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown"
                      style="background-color: rgb(36, 36, 36); border-radius: none; border: none;" aria-expanded="false">
                      <img src="../assets/icons/programs.svg" />
                    </button>
                    <ul class="dropdown-menu dropdown-menu-dark">
                      <div v-for="program in programStore.programList " :key="Date.now.toString">
                        <li>
                          <button class="dropdown-item" @click="gotoprograms(program.program_id)">{{ program.title }}</button>
                        </li>
                      </div>


                    </ul>
                  </li>
                </ul>
              </div>
            </li>

            <form class="d-flex" role="login">
              <button @click="goLogin()" type="button" class="btn btn-light login-btn"
                style="margin: auto; width:150px">{{ $t('topBar.login') }}</button>
            </form>

          </ul>
        </div>
      </div>
    </nav>

  </header>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { AuthStore } from '../store/authStore/index'
import { ProgramStore } from '../store/programs/index'
import { onMounted } from 'vue'
import i18n from "../langurage/index";
const router = useRouter()
const authStore = AuthStore()
const programStore = ProgramStore()


onMounted(() => {
  // 获取项目列表
  programStore.getList()
})


function gotoprograms(id: string) {
  programStore.getById(id)
  router.push({
    path: 'program',
  })

}
//语言切换
function seleLanguage(type: string) {
  switch (type) {
    case 'zh': localStorage.setItem("locale", "zh"); break;
    case 'en': localStorage.setItem("locale", "en"); break;
    case 'Japanese': localStorage.setItem("locale", "Japanese"); break;
    case 'Russian': localStorage.setItem("locale", "Russian"); break;
    case 'french': localStorage.setItem("locale", "french"); break;
  }
  i18n.global.locale = type;
}

function goLogin() {
  // 判断是否已登录
  if (authStore.accessToken !==null && authStore.accessToken !== undefined && authStore.accessToken.length>10) {
    router.replace({ path: 'biography' })
    return;
  }

  router.replace({
    path: 'login',
  })


}



</script>
<style lang="scss" scoped>
.top-icon {
  width: 60px;
  height: 60px;
  border-radius: 5px;
  transition: all .5s;
}

.top-icon:hover {
  padding: 3px;
  box-shadow: 0 0 15px $passlink-font-color-yellow;
}

.top-icon:hover::before {
  transition: all .5s;
}


.meau-but {
  background: none;
  border: none;
  border-radius: 100px;
  padding: 0;
  background-color: $passlink-bg-color;

  img {
    width: 35px;
  }
}

.meau-but:hover {
  animation: rotate 1s;
  border: none;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.center-box {
  background-color: $passlink-bg-color;
  margin: auto;
  border-bottom: 2px solid $passlink-font-color-yellow;
}

.ul-li {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

a {
  text-decoration: none;
  font-weight: bold;
  font-size: $passlink-font-size16;
  color: $passlink-font-color-white;
}

a:hover {
  color: $passlink-font-color-yellow;
}

@media screen and (max-width: $passlink-media-max-width-5) {
  .login-btn {
    // 在宽度大于断点时隐藏
    display: none;
  }

}
</style>

